<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04 作用域</title>
</head>

<body>

</body>
<script>

    /* 
        * 作用域：
            * 全局的作用域：函数外面的区域，全局作用
            * 局部的作用域：函数里面的区域
        * 变量的分类：
            * 全局变量：在全局作用域下声明的变量，现在函数外的变量
                * 在全局、局部的作用域都可以拿到全局变量
            * 局部变量：在局部作用域下声明的变量，现在函数里的变量
                * 局部变量作用域仅限函数体内
            * 两种变量的区别：
                * 作用范围不同外面的拿不到里面的，里面的可以拿到外面的变量
                * 生命周期不同：尽量不要写全局变量
                    * 全局变量一旦生成就永久存在内存中，不会消失
                    * 局部变量声明就可以使用，当函数结束后，变量就会被垃圾回收机制回收，清理内存
        
        总结：外面的拿不到里面的，里面的可以拿到外面的变量 
    */

    var num = 8; // 全局变量

    function show() {
        var nums = 88; //局部变量
        console.log('局部里拿全局变量num' + num);
        console.log('局部里拿局部变量nums' + nums);
    };

    show();

    console.log('全局变量num' + num);
    // console.log('局部变量nums' + nums); // nums is not defined 没有声明

    // 作用域链：从内到外，从上至下从局部自己的作用域下找变量，找不到就往父级作用域找，一直找到最外层全局作用域为止，都找不到才返回not defined，如果很多作用域都有函数该变量，那就是就近原则(近水楼台先得月)
    var a = 789;
    function father() { // 父函数
        var total = 123;
        var a = 456;
        function son() { // 子函数:你的就是我的，我的还是我的
            var a = 234;
            console.log('total = ' + total); // 123
            console.log('a = ' + a); // 123
        }
        son();
        console.log('a = ' + a); // a is not defined
    }

    father();

</script>

</html>